<template>
  <div class="my container">
    <header>
      <div class="user-info" v-if="loginStatus">
        <img :src="userInfo.imgUrl" alt="" />
        <span>{{ userInfo.nickName }}</span>
      </div>
      <div v-else class="login" @click="goLogin">登录/注册</div>
    </header>
    <section>
      <div class="main">
        <div class="daifukuan" @click="daifu()">
          <van-icon name="balance-list-o" />
          <span>待付款</span>
        </div>
        <div class="yifukuan" @click="yifu()">
          <van-icon name="gold-coin-o" />
          <span>已付款</span>
        </div>
      </div>
      <ul>
        <li @click="goPath">地址管理</li>
        <li v-if="loginStatus" @click="loginOut">退出登录</li>
      </ul>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Tabbar from "@/components/common/Tabbar.vue";
export default {
  name: "My",
  components: {
    Tabbar,
  },
  computed: {
    ...mapState({
      loginStatus: (state) => state.user.loginStatus,
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    ...mapMutations(["loginOut"]),
    goLogin() {
      this.$router.push("/login");
    },
    //进入地址管理
    goPath() {
      this.$router.push("/path");
    },

    daifu() {
      this.$router.push({
        path: "/daifu",
      });
    },
    yifu() {
      this.$router.push({
        path: "/yifu",
      });
    },
  },
};
</script>
<style scoped lang="scss">
header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4.266666rem;
  background-color: #b0352f;
}
header .login {
  padding: 0.16rem 0.4rem;
  font-size: 0.426666rem;
  color: #fff;
  background-color: #f6ab32;
  border-radius: 6px;
}
header .user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
header .user-info img {
  width: 1.76rem;
  height: 1.76rem;
  border-radius: 50%;
}
header .user-info span {
  padding: 0.533333rem 0;
  font-size: 0.48rem;
  color: #fff;
}
section {
  flex: 1;
  overflow: hidden;

  .main {
    margin-top: 20px;
    display: flex;
    margin-left: 20px;
    padding-top: 20px;
    margin-bottom: 32px;
    width: 102%;
    color: #616161;

    i.van-icon.van-icon-balance-list-o {
      font-size: 30px;
      position: relative;
      top: -4px;
      left: 30px;
    }

    i.van-icon.van-icon-gold-coin-o {
      font-size: 30px;
      position: relative;
      top: -4px;
      left: 30px;
    }

    span {
      position: relative;
      top: 21px;
      left: -6px;
      font-size: 12px;
    }
  }
}
section ul li {
  padding: 0.4rem;
  font-size: 0.426666rem;
} /*# sourceMappingURL=./index.css.map */
</style>
